<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>基本信息</h3>
      <el-form ref="goods" :rules="rules" :model="goods" label-width="150px" :disabled="editType == 'detail'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品类目" prop="categoryId">
              <el-cascader
                style="width: 100%"
                v-model="goods.categoryIdList"
                :options="treeData"
                @change="handleChange"
                filterable></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="goods.name" maxlength="30"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="副标题" prop="introduction">
              <el-input v-model="goods.introduction" maxlength="300"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="软件服务" prop="services">
            <el-checkbox v-model="goods.services" v-show="false"/>
            <el-row>
              <el-tag
                v-if="goods.services && goods.services.length>0"
                v-for="service in parseSevices(goods.services)"
                type="primary"
                closable
                :key="service.serviceCode"
                @close="delService(service)"
              >{{ service.serviceName }}
              </el-tag>
              <el-button icon="el-icon-plus" @click="addService"></el-button>
            </el-row>
          </el-form-item>
        </el-row>
        <!--  v-if="serviceType != '会员'"  -->
        <el-form-item label="适配车型" prop="modelName">
          <el-checkbox v-model="goods.modelCode" v-show="false"/>
          <el-row v-if="goods.modelName && goods.modelName.length>0">
            <el-tag v-for="(modelName, index) in goods.modelName" type="primary" :key="index">{{ modelName }}</el-tag>
          </el-row>
        </el-form-item>
        <!--<el-row  v-if="serviceType != '会员'">-->
        <!--<el-col :span="12">-->
        <!--<el-form-item label="适用品牌" prop="series">-->
        <!--<el-input v-model="goods.series" maxlength="32"/>-->
        <!--</el-form-item>-->
        <!--</el-col>-->
        <!--<el-col :span="12">-->
        <!--<el-form-item label="是否需要激活" prop="activated">-->
        <!--<el-radio-group v-model="goods.activated">-->
        <!--<el-radio-->
        <!--v-for="dict in dict.type.is_need_activated"-->
        <!--:key="dict.value"-->
        <!--:label="dict.value"-->
        <!--&gt;{{dict.label}}</el-radio>-->
        <!--</el-radio-group>-->
        <!--</el-form-item>-->
        <!--</el-col>-->
        <!--</el-row>-->
        <el-row>
          <el-col :span="12">
            <el-form-item label="上架渠道" prop="deviceType">
              <el-select
                v-model="goods.deviceType"
                placeholder="上架渠道"
                clearable
                style="width: 100%"
                multiple
              >
                <el-option
                  v-for="dict in dict.type.app_device_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="sort">
              <span slot="label">
                <el-tooltip content="数值越大，排越前；相同排序时，按创建时间倒序排" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>显示排序
              </span>
              <div style="display: flex;align-items: center;flex-wrap: wrap">
                <el-input-number
                  style="margin-right: 20px"
                  v-model="goods.sort"
                  controls-position="right"
                  :min="0"
                  :max="10000"
                  :precision="0"
                />
                <span>{ 当前最大排序：{{ showMaxSort }} }</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="serviceType == '会员'">
          <!--<el-col :span="12">-->
          <!--<el-form-item label="会员品牌类型" prop="memberType">-->
          <!--<el-select-->
          <!--v-model="goods.memberType"-->
          <!--placeholder="会员品牌类型"-->
          <!--clearable-->
          <!--style="width: 240px"-->
          <!--&gt;-->
          <!--<el-option-->
          <!--v-for="dict in dict.type.member_type_dict"-->
          <!--:key="dict.value"-->
          <!--:label="dict.label"-->
          <!--:value="dict.value"-->
          <!--/>-->
          <!--</el-select>-->
          <!--</el-form-item>-->
          <!--</el-col>-->
          <el-col :span="12">
            <el-form-item label="充值类型" prop="payType">
              <el-select
                v-model="goods.payType"
                placeholder="充值类型"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in dict.type.member_pay_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="isSupportRefund">
              <span slot="label">
                <el-tooltip content="是否支持未激活7天无理由退款" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>是否支持退款
              </span>
              <el-radio-group v-model="goods.isSupportRefund">
                <el-radio
                  v-for="dict in dict.type.is_support_refund"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="this.editType === 'detail'">
            <el-form-item label="上架状态" prop="shelf">
              <el-radio-group v-model="goods.shelf">
                <el-radio
                  v-for="dict in dict.type.goods_shelf_status"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否开启积分抵扣" prop="isOpenIntegralDeduction">
              <el-radio-group v-model="goods.isOpenIntegralDeduction">
                <el-radio label="1">开启</el-radio>
                <el-radio label="0">不开启</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="配置最高抵扣值" prop="integralDeductionValue" v-if="goods.isOpenIntegralDeduction == 1">
              <div style="display: flex">
                <el-select
                  style="width: 100px"
                  v-model="goods.integralDeductionType"
                  @change="e =>{goods.integralDeductionValue=e==0?'100':'1'}"
                >
                  <el-option label="按比例" value="0"/>
                  <el-option label="按分值" value="1"/>
                </el-select>
                <el-input
                  style="width: 100px"
                  v-model="goods.integralDeductionValue">
                <span slot="suffix">
                  {{goods.integralDeductionType ==0? '%' : '积分'}}
                </span>
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="价格标签" prop="priceTags">
          <el-select v-model="goods.priceTags" multiple placeholder="请选择" style="width:100%">
            <el-option
              v-for="dict in dict.type.price_tags"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="保障服务" prop="ensureIds">
          <el-select v-model="goods.ensureIds" multiple placeholder="请选择" style="width:100%">
            <el-option
              v-for="dict in dict.type.goods_guarantee_service"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="dict.type.app_device_type.find(e=>e.value==keys).label+'协议网址'" prop="protocolUrlOfDeviceType"
                      v-for="(keys,indexs) in Object.keys(goods.protocolUrlOfDeviceType)" :key="indexs">
          <!--<el-checkbox v-model="protocolUrlList" v-show="false"/>-->
          <el-row class="from-item" :style="editType == 'detail'?{background: '#e6ebf5'}:{}">
            <el-tag v-for="(item, index) in goods.protocolUrlOfDeviceType[keys]" type="primary" :key="index">{{ item.address
              }}
            </el-tag>
          </el-row>
          <el-button class="btn-input" @click="addProtocol(keys)"></el-button>


          <!--<el-input v-model="protocolUrlListStr" maxlength="150"/>-->
          <!--<el-button class="btn-input">{{ goods.protocolUrl }}</el-button>-->
          <!--<el-select v-model="protocolUrlList" multiple placeholder="请选择" style="width:100%" @change="changeProtocolUrl">-->
          <!--<el-option-->
          <!--v-for="dict in goodsProtocolAll"-->
          <!--:key="dict.value"-->
          <!--:label="dict.label"-->
          <!--:value="dict.value"-->
          <!--&gt;</el-option>-->
          <!--</el-select>-->
        </el-form-item>

        <!--商品规格布局更新1-->
        <h3>规格配置</h3>
        <el-form-item label="商品规格" prop="specType">
          <el-row>
            <el-col :span="24">
              <el-radio-group v-model="goods.specType" @change="specChanged">
                <!--<el-radio-button :label="false">默认标准规格</el-radio-button>-->
                <!--<el-radio-button :label="true">单一服务</el-radio-button>-->
                <!--<el-radio-button :label="true">多服务统一规格</el-radio-button>-->
                <!--<el-radio-button :label="true">多种服务多种规格</el-radio-button>-->
                <el-radio :label="'0'" :disabled="!!(goods.services && goods.services.length>1)">单一服务</el-radio>
                <el-radio :label="'1'" :disabled="(goods.modelName.length===0 || serviceType == '会员')">多服务统一规格</el-radio>
                <el-radio :label="'2'" :disabled="!(goods.services && goods.services.length>1)">多种服务多种规格</el-radio>
              </el-radio-group>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <SkuForm
                :multipleSpec="multipleSpec"
                :specType="goods.specType"
                :serviceType="serviceType"
                :goodsSpuSpec="goodsSpuSpec"
                :goodsSku="goodsSku"
                :isSelectedCurrencySpuSpec="isSelectedCurrencySpuSpec"
                :form="form"
                :skuType="this.editType == 'detail'"
                @setGoodsSku="setGoodsSku"
              ></SkuForm>
            </el-col>
          </el-row>
        </el-form-item>
        <h3>图文详情</h3>
        <el-row>
          <el-form-item prop="picUrls" width="1200" :inline="true">
            <span slot="label">
              <el-tooltip content="图片最多选择5张" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>商品图片
            </span>
            <el-checkbox v-model="goods.picUrls" v-show="false"/>
            <el-row v-if="goods.picUrls.length>0" :inline="true">
              <el-row>
                <img
                  class="imgClass"
                  v-for="(pic,index) in goods.picUrls"
                  :key="pic"
                  :src="pic"
                  alt
                  style="width: 100px; height: 100px;cursor: pointer;"
                  @click="delImg(index)"
                >
              </el-row>
            </el-row>
            <el-button icon="el-icon-plus" @click="addImg"></el-button>
          </el-form-item>
        </el-row>
        <el-form-item label="商品详情" style="margin-bottom:70px;" prop="description">
          <editor :readOnly="this.editType == 'detail'" v-model="goods.description" style="height:400px;"/>
        </el-form-item>

        <el-form-item label="使用须知" style="margin-bottom:70px;" prop="usageNotice">
          <editor :readOnly="this.editType == 'detail'" v-model="goods.usageNotice" style="height:400px;"/>
        </el-form-item>
        <!--<el-form-item label="商品卖点" style="margin-bottom:70px;" prop="sellPoint" v-if="serviceType != '会员'">-->
        <!--<editor :readOnly="this.editType == 'detail'" v-model="goods.sellPoint" style="height:400px;"/>-->
        <!--</el-form-item>-->
      </el-form>
    </el-card>
    <image-multiple-selector
      :dialogVisible.sync="showImageSelector"
      @confirm="onImageSelectorConfirm($event)"
    ></image-multiple-selector>
    <service-multiple-selector
      :dialogVisible.sync="showServiceSelector"
      :servicesList="goods.services"
      :isReRequery="isReRequery"
      @confirm="onServiceSelectorConfirm($event)"
    ></service-multiple-selector>
    <sku-item-multiple-selector
      ref="skuItemSelector"
      :dialogVisible.sync="showSkuItemSelector"
      @confirm="onSkuItemSelectorConfirm($event)"
    ></sku-item-multiple-selector>
    <!-- :protocolType="addProtocolIndex" -->
    <protocol-item-multiple-selector
      ref="protocolItemSelector"
      :dialogVisible.sync="showProtocolItemSelector"
      @confirm="onProtocolItemSelectorConfirm($event)"
    ></protocol-item-multiple-selector>
    <spec-item-multiple-selector
      ref="specItemSelector"
      :dialogVisible.sync="showSpecItemSelector"
      @confirm="onSpecItemMultipleSelectorConfirm($event)"
    ></spec-item-multiple-selector>

    <div class="op-container" align="center">
      <el-button @click="handleCancel" v-if="this.editType != 'detail'">取消</el-button>
      <el-button type="primary" @click="handlePublish" v-if="this.editType === 'detail'">关闭</el-button>
      <el-button type="primary" @click="handlePublish" v-else>保存</el-button>
    </div>
  </div>
</template>

<script>
  import SkuForm from '@/components/sku/sku-form-new.vue'
  import { getToken } from '@/utils/auth'
  import { allSpec } from '@/api/shop/spec/spec'
  import { arrayIsInByParamVal } from '@/utils/index'
  import { list as categoryList } from '@/api/shop/category'
  import ImageMultipleSelector from '@/components/ImageMultipleSelector'
  import ServiceMultipleSelector from '@/components/ServiceMultipleSelector'
  import SkuItemMultipleSelector from '@/components/SkuItemMultipleSelector'
  import ProtocolItemMultipleSelector from '@/components/ProtocolItemMultipleSelector'
  import SpecItemMultipleSelector from '@/components/SpecItemMultipleSelector'
  import { maxSort } from '@/api/shop/goods'

  //商品Spu相关
  import {
    editGoods,
    addGoods,
    getGoods,
    spcListBySpuId,
    getSpecByServiceCodes,
    checkSpuGroup
  } from '@/api/shop/goods'

  export default {
    name: 'CommonForm',
    dicts: [
      'goods_shelf_status',
      'goods_guarantee_service',
      'is_need_activated',
      'app_device_type',
      'is_support_refund',
      'member_type_dict',
      'member_pay_type',
      'price_tags'
    ],
    components: {
      SkuForm,
      ImageMultipleSelector,
      ServiceMultipleSelector,
      SkuItemMultipleSelector,
      ProtocolItemMultipleSelector,
      SpecItemMultipleSelector
    },
    props: {
      // 编辑类型。"add"或"edit"
      editType: {
        type: String,
        default: 'add'
      }
    },
    data() {
      return {
        // 显示选择图片
        showImageSelector: false,
        //显示选择服务
        showServiceSelector: false,
        //显示选择sku
        showSkuItemSelector: false,
        //显示选择url协议
        showProtocolItemSelector: false,
        //显示选择服务
        showSpecItemSelector: false,
        //用于处理重新请求服务的确认事件
        isReRequery: 0,
        resData:{},
        goods: {
          id: undefined,
          sort: 0,
          sellPoint: '',
          categoryId: null,
          categoryIdList: [],
          name: '',
          description: '',
          picUrls: [],
          shelf: '0',
          isSupportRefund: '0',
          series: '',
          modelName: [],
          modelCode: [],
          specType: null,
          spuSpec: [],
          priceTags: [],
          skus: [],
          ensureIds: [],
          usageNotice: '',
          activated: '0',
          protocolUrl: '',
          services: [],
          deviceType: [],
          introduction: '',
          payType: '0',
          memberType: '',
          isOpenIntegralDeduction: '0',
          integralDeductionType: '0',
          integralDeductionValue: '100',
          protocolUrlOfDeviceType: {},
        },
        multipleSpec: true,
        serviceType: null,
        form: {},
        rules: {
          // memberType
          categoryId: [
            { required: true, message: '商品类目不能为空', trigger: ['change', 'blur'] }
          ],
          usageNotice: [
            { required: true,trigger: ['change', 'blur'],
              validator: (rule, value, callback) => {
                if (!value || value == '<p><br></p>') {
                  callback(new Error("使用须知不能为空"));
                }else {
                  callback();
                }
              },
            }
          ],
          // priceTags: [
          //   { required: true, message: '请选择价格标签', trigger: ['change', 'blur'] }
          // ],
          payType: [
            { required: true, message: '请选择充值类型', trigger: ['change', 'blur'] }
          ],
          isOpenIntegralDeduction: [
            { required: true, message: '请选择是否开启积分支付', trigger: ['change', 'blur'] }
          ],
          ensureIds: [
            { required: true, message: '请选择保障服务', trigger: ['change', 'blur'] }
          ],
          isSupportRefund: [
            { required: true, message: '请选择是否支持退款', trigger: ['change', 'blur'] }
          ],
          specType: [
            { required: true, message: '请选择商品规格', trigger: ['change', 'blur'] }
          ],
          name: [
            { required: true, message: '商品名称不能为空', trigger: ['change', 'blur'] }
          ],
          description: [
            { required: true, trigger: ['change', 'blur'],
              validator: (rule, value, callback) => {
                if (!value || value == '<p><br></p>') {
                  callback(new Error("商品详情不能为空"));
                }else {
                  callback();
                }
              },
            }
          ],
          sort: [
            { required: true, message: '商品显示排序不能为空', trigger: ['change', 'blur'] }
          ],
          sellPoint: [
            { required: true, message: '商品卖点不能为空', trigger: ['change', 'blur'] }
          ],
          series: [
            { required: true, message: '适用品牌不能为空', trigger: ['change', 'blur'] }
          ],
          activated: [
            { required: true, message: '是否需要激活不能为空', trigger: ['change', 'blur'] }
          ],
          shelf: [
            { required: true, message: '是否上架不能为空', trigger: ['change', 'blur'] }
          ],
          picUrls: [
            { required: true, message: '商品图片不能为空', trigger: ['change', 'blur'] }
          ],
          deviceType: [
            { required: true, message: '上架渠道不能为空', trigger: ['change', 'blur'] }
          ],
          services: [
            { required: true, message: '软件服务不能为空', trigger: ['change', 'blur'] }
          ],
          modelName: [
            { required: true, message: "适配车型不能为空", trigger: ["change",'blur'] }
          ],
          protocolUrlOfDeviceType: [
            { required: true, trigger: ["change",'blur'],
            validator: (rule, value, callback) => {
              value = this.goods.protocolUrlOfDeviceType
              if (!value || JSON.stringify(value) == '{}'||Object.values(value).find(e=>e.length==0)!==undefined) {
                callback(new Error("协议网址不能为空"));
              }else{
                callback();
              }
            },}
          ],
          // protocolUrlList: [
          //   { required: true, message: "协议网址不能为空", trigger: ["change",'blur'] },
          //   // {
          //   //   pattern: /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/,
          //   //   message: "协议网址格式不正确",
          //   //   trigger: ["change",'blur']
          //   // }
          // ],
          integralDeductionValue: [
            {
              required: true,
              validator: (rule, value, callback) => {
                if (!value) {
                  callback(new Error('请输入最高抵扣值'))
                }
                if (/^[0-9]{1,}$/.test(value)) {
                  value = parseInt(value)
                  if (this.goods.integralDeductionType == 0) {
                    if (value == 0 || value > 100) {
                      callback(new Error('比例值必须在1%到100%之间'))
                    }
                  } else {
                    if (value == 0) {
                      callback(new Error('积分值最低为1积分'))
                    }
                  }
                } else {
                  if (this.goods.integralDeductionType == 0) {
                    callback(new Error('比例值必须在1%到100%之间'))
                  } else {
                    callback(new Error('积分值最低为1积分'))
                  }
                }
                callback()
              },
              trigger: ['change', 'blur']
            }
          ]
        },
        spuId: undefined,
        // goodsSpec: [],
        isSelectedCurrencySpuSpec: false,//是否可选通用规格
        goodsSpuSpec: [],//规格列表
        goodsSku: [],//sku列表
        goodsSkuAll: [],//sku选项框列表
        // goodsSkuData: [],
        // goodsSpuSpecData: [],
        treeData: [],
        categoryIdJson: [],
        protocolUrlList: [],//保证服务多选下拉框,
        servicesInfoDict: {},//存放服务code 和 name的信息字典

        // addProtocolIndex: -1,
        showMaxSort: 0
      }
    },
    mounted() {
      document.documentElement.scrollTop = 0
      maxSort().then(res => {
        this.showMaxSort = res.data
      })
      const spuId = this.$route.query && this.$route.query.id
      this.spuId = spuId
      this.goods.id = spuId
      this.init()
    },
    computed: {
      headers() {
        return {
          headers: { Authorization: 'Bearer ' + getToken() }
        }
      }
    },
    provide() {
      return {
        showSelectSkuItem: this.showSelectSkuItem,
        showSpecItem: this.showSpecItem
      }
    },
    methods: {
      init: function() {
        // 获取所有规格
        // allSpec().then(res => {
        //   this.goodsSpec = res.data;
        // });
        // 获取所有商品类目，并构造相应的多层级数据格式
        categoryList().then(response => {
          let newTableData = this.restructureTableData(response.data)
          this.treeData = this.handleTree(newTableData, 'id')
        })

        if (this.editType === 'edit' || this.editType === 'detail') {
          // 编辑
          // 多规格编辑时，显示已保存的spuspec
          getGoods(this.spuId).then(res => {
            console.log(res.data)
            this.goods = res.data
            this.goods.description = res.data.description
            this.resData = res.data
            this.goods.categoryIdList = []
            this.goods.deviceType = res.data.deviceType.split(',')
            if (this.goods.categoryId) {
              let categoryJson = JSON.parse(this.goods.categoryId)
              this.goods.categoryIdList = []
              this.getSelectedIdsByJson(this.goods.categoryIdList, categoryJson)
              // this.goods.categoryIdList.push(itemInfo);
            }
            this.$nextTick(() => {
              this.goods.protocolUrlOfDeviceType = {}
              let protocolUrlList = []
              if (this.goods.protocolUrl) {
                protocolUrlList = JSON.parse(this.goods.protocolUrl)
              }
              if (Array.isArray(protocolUrlList) && protocolUrlList.length != 0) {
                this.goods.protocolUrlOfDeviceType[res.data.deviceType] = protocolUrlList
              } else if (typeof protocolUrlList == 'object') {
                this.goods.protocolUrlOfDeviceType = protocolUrlList
              } else {
                if (this.goods.deviceType.length > 0) {
                  this.goods.deviceType.forEach(e => {
                    this.goods.protocolUrlOfDeviceType[e] = []
                  })
                }
              }
            })
            if (this.goods.services.length) {
              if (!this.goods.services[0].modelCode) {
                this.serviceType = '会员'
              }
            }

            console.log(this.goods)
            // this.goodsSku = res.data.skus;
            // if (!res.data.specType) {
            //   this.multipleSpec = false;
            // }
            // if (res.data.specType == "0") {
            //   this.multipleSpec = false;
            // } else {
            //   this.multipleSpec = true;
            // }

            this.$nextTick(() => {
              this.specChanged()
              document.documentElement.scrollTop = 0
            })
          })

          // spcListBySpuId(this.spuId).then(res => {
          //   this.goodsSpuSpec = res.data || [];
          // });
        } else if (this.editType === 'add') {
          // 新增
          this.goodsSpuSpec = []
          this.goodsSku = []
        }
      },
      // 表单重置
      reset() {
        this.goods = {
          id: undefined,
          sort: 0,
          sellPoint: undefined,
          categoryId: undefined,
          categoryIdList: undefined,
          name: undefined,
          description: undefined,
          picUrls: [],
          shelf: '0',
          isSupportRefund: '0',
          series: undefined,
          modelName: [],
          modelCode: [],
          spuSpec: [],
          skus: [],
          ensureIds: [],
          usageNotice: undefined,
          activated: '0',
          protocolUrl: '',
          deviceType: '',
          introduction: '',
          payType: '',
          memberType: ''
        }
        this.resetForm('goods')

        this.protocolUrlList = []

      },
      handleCancel: function() {
        if (this.editType === 'add') {
          this.reset()
          const obj = { path: '/goods/create' }
          this.$tab.closeOpenPage(obj)
        } else if (this.editType === 'edit') {
          this.reset()
          const obj = { path: '/goods/edit' }
          this.$tab.closeOpenPage(obj)
        } else {
          this.reset()
          const obj = { path: '/goods/detail' }
          this.$tab.closeOpenPage(obj)
        }

        this.$router.push({ path: '/shop/goods' })
      },
      handlePublish: function() {
        if (this.editType === 'detail') {
          const obj = { path: '/goods/detail' }
          this.$tab.closeOpenPage(obj)
          this.$router.push({ path: '/shop/goods' })
          return
        }

        // let protocolUrlList = [];
        // this.protocolUrlOfDeviceType.forEach((item)=>{
        //   protocolUrlList.push(item);
        // });
        this.goods.protocolUrl = JSON.stringify(this.goods.protocolUrlOfDeviceType)
        this.$refs['goods'].validate(valid => {
          if (valid) {
            this.goods.spuSpec = []
            this.goods.skus = []
            this.goodsSpuSpec.forEach((item1) => {
              let newInfo = {}
              newInfo['id'] = item1.id
              newInfo['name'] = item1.name
              this.goods.spuSpec.push(newInfo)
            })

            // this.goods.ensureIds = JSON.stringify(this.ensureIds);
            console.log(this.goodsSku)
            let _goodsSkuLen = this.goodsSku.length
            for (let i = 0; i < _goodsSkuLen; i++) {
              let itemInfo = this.goodsSku[i]
              for (let j = 0; j < itemInfo.skus.length; j++) {
                let skuItem = itemInfo.skus[j]
                if (!skuItem.picUrl) {
                  this.$modal.msgError(skuItem.name + (skuItem.serviceName ? ('-' + skuItem.serviceName) : '') + '的sku图片不能为空！')
                  return
                }
                if (!skuItem.number) {
                  this.$modal.msgError(skuItem.name + (skuItem.serviceName ? ('-' + skuItem.serviceName) : '') + '的数量不能为空！')
                  return
                }
                if (!skuItem.unit) {
                  this.$modal.msgError(skuItem.name + (skuItem.serviceName ? ('-' + skuItem.serviceName) : '') + '的计量单位不能为空！')
                  return
                }

                let newInfo = {}
                newInfo['name'] = skuItem.name
                newInfo['picUrl'] = skuItem.picUrl
                newInfo['salesPrice'] = skuItem.salesPrice
                newInfo['marketPrice'] = skuItem.marketPrice
                newInfo['androidSalesPrice'] = skuItem.androidSalesPrice
                newInfo['iosSalesPrice'] = skuItem.iosSalesPrice
                newInfo['tobSalesPrice'] = skuItem.tobSalesPrice
                newInfo['stock'] = skuItem.stock
                newInfo['maxPurchaseNum'] = skuItem.maxPurchaseNum
                newInfo['enable'] = skuItem.enable
                newInfo['sort'] = skuItem.sort
                newInfo['serviceCode'] = skuItem.serviceCode || null
                newInfo['serviceName'] = skuItem.serviceName || null
                newInfo['unit'] = skuItem.unit
                newInfo['number'] = skuItem.number
                newInfo['name1'] = skuItem.name1
                newInfo['name2'] = skuItem.name2
                newInfo['name3'] = skuItem.name3
                newInfo['specs'] = skuItem.specs.concat()
                newInfo['serviceGoodsId'] = skuItem.serviceGoodsId
                  // <p><br></p>

                if (skuItem.id) {
                  newInfo['id'] = skuItem.id
                }
                if (skuItem.skuCode) {
                  newInfo['skuCode'] = skuItem.skuCode
                }
                this.goods.skus.push(newInfo)
              }
            }

            let params = JSON.parse(JSON.stringify(this.goods))
            params.deviceType = params.deviceType.join(',')
            console.log(params)
            // return
            if (this.editType === 'add') {
              //新增
              delete params.id

              addGoods(params).then(response => {
                if (response.code === 200) {
                  this.$modal.msgSuccess('新增成功')
                  this.reset()
                  const obj = { path: '/goods/create' }
                  this.$tab.closeOpenPage(obj)
                  this.$router.push({ path: '/shop/goods' })
                } else {
                  this.$modal.msgError(response.message)
                }
              })
            } else {
              // if(this.goods.description.replace('<p><br></p>','') == this.resData.description){
              //
              // }
              //编辑
              editGoods(params).then(response => {
                if (response.code === 200) {
                  this.$modal.msgSuccess('编辑成功')
                  this.reset()
                  const obj = { path: '/goods/edit' }
                  this.$tab.closeOpenPage(obj)
                  this.$router.push({ path: '/shop/goods' })
                } else {
                  this.$modal.msgError(response.message)
                }
              })
            }
          } else {
            this.$modal.msgError('请检查填写内容是否符合规范再提交！')
          }
        })
      },
      /**
       * 添加图片
       */
      addImg() {
        if (this.editType === 'detail') {
          return
        }
        this.showImageSelector = true
      },
      /**
       * 删除图片
       */
      delImg(index) {
        if (this.editType === 'detail') {
          return
        }
        this.goods.picUrls.splice(index, 1)
      },
      /**
       * 选中图片确认
       */
      onImageSelectorConfirm(selectedItem) {
        var total = selectedItem.length + this.goods.picUrls.length
        if (total > 5) {
          this.$message({
            type: 'error',
            message: '上传文件个数超出限制!最多上传5张图片!'
          })
          return
        }
        selectedItem.forEach(element => {
          this.goods.picUrls.push(element.url)
        })
      },
      /**
       * 添加服务
       */
      addService() {
        if (this.editType === 'detail') {
          return
        }
        this.showServiceSelector = true
      },
      /**
       * 删除服务
       */
      delService(service) {
        if (this.editType === 'detail') {
          return
        }
        //删除服务
        let services = []
        this.goods.services.forEach(element => {
          if (element.serviceCode != service.serviceCode) {
            services.push(element)
          }
        })
        this.goods.services = services
        //车型信息
        if (this.goods.services.length == 0) {
          this.goods.modelCode = []
          this.goods.modelName = []
        }
        this.serviceType = null//重置服务类型，用于判断是否是会员服务
        console.log(this.goods.services)
        console.log(this.goods.modelCode)
        this.goods.services.forEach(element => {
          this.serviceType = element.serviceType
          if (element.modelCode && element.vehicleConfig && this.goods.modelCode.includes(element.modelCode + '-' + element.vehicleConfig) == false) {
            this.goods.modelCode.push(element.modelCode + '-' + element.vehicleConfig)
            this.goods.modelName.push(element.modelName + '-' + element.vehicleConfig)
          }
        })

        // if(this.serviceType === '会员'){
        //   this.goods.deviceType = '1';
        // }
        //重置商品规格
        this.goods.specType = null
        this.goodsSpuSpec = []
        this.goodsSku = []
        this.isReRequery = new Number(1)
      },
      /**
       * 选中服务确认
       */
      onServiceSelectorConfirm(obj) {
        console.log(obj)
        let { modelCodes, selectedItem } = obj
        this.serviceType = null//重置服务类型，用于判断是否是会员服务
        if (selectedItem && selectedItem.length) {
          this.serviceType = selectedItem[0].serviceType
        }

        if (this.serviceType === '会员') {
          let isErrorCb = this.serviceSelectorConfirmCb(selectedItem)
          if (isErrorCb) {
            this.serviceType = null
            return
          }
          this.goods.payType = '0'
          this.goods.memberType = ''
          // this.goods.deviceType = '1';
          this.goods.modelCode = modelCodes
          this.goods.modelName = modelCodes
        } else {
          checkSpuGroup(selectedItem).then(response => {
            if (response.code === 200) {
              this.serviceSelectorConfirmCb(selectedItem)
            } else {
              this.$modal.msgError(response.message)
            }
          })
        }
      },
      serviceSelectorConfirmCb(selectedItem) {
        //保存新增的服务
        let services = []
        let serviceCodes = new Set()
        selectedItem.forEach(element => {
          if (!element.learningAddress) {
            element.learningAddress = []
          }
          services.push(element)
          serviceCodes.add(element.serviceCode)
        })
        //覆盖原页面的旧服务
        this.goods.services.forEach(element => {
          if (serviceCodes.has(element.serviceCode) == false) {
            services.push(element)
            serviceCodes.add(element.serviceCode)
          }
        })

        let modelCodes = new Set()
        let vehicleConfigs = new Set()
        services.forEach(element => {
          modelCodes.add(element.modelCode)
          vehicleConfigs.add(element.vehicleConfig)
        })
        if (serviceCodes.size > 1) {
          if (modelCodes.size > 1) {
            this.$message({
              type: 'error',
              message: '车型选择有误，不同服务组合，车型和车辆款型必须一致!'
            })
            return true
          }
          if (vehicleConfigs.size > 1) {
            this.$message({
              type: 'error',
              message: '服务选择有误，不同服务组合，车型和车辆款型必须一致!'
            })
            return true
          }
        }
        this.goods.services = services
        //车型信息
        this.goods.modelCode = []
        this.goods.modelName = []
        this.goods.services.forEach(element => {
          if (element.modelCode && element.vehicleConfig && this.goods.modelCode.includes(element.modelCode + '-' + element.vehicleConfig) == false) {
            this.goods.modelCode.push(element.modelCode + '-' + element.vehicleConfig)
            this.goods.modelName.push(element.modelName + '-' + element.vehicleConfig)
          }
        })
        //重置商品规格
        this.goods.specType = null
        this.goodsSpuSpec = []
        this.goodsSku = []
      },
      //商品规格切换并更新展示规格商品内容
      specChanged: function(label) {
        console.log(label)
        console.log(this.goods.specType)
        // if(label==='1'){
        //   this.goodsSpuSpec = [];
        //   this.goodsSku = [];
        //   return
        // }
        // console.log(this.goods.specType);
        // if (label === false) {
        //   this.goods.specType = "0";
        // } else {
        //   this.goods.specType = "1";
        // }
        // console.log(label);
        //根据选择服务获取规格数据
        let servicesStr = ''
        this.goods.services.forEach((item, index) => {
          console.log('item:' + item.serviceCode + '  index:' + index)
          this.servicesInfoDict[item.serviceCode] = item.serviceName
          if (index > 0) {
            servicesStr += ','
          }
          servicesStr += item.serviceCode
        })

        if (!servicesStr) {
          this.$message({
            type: 'error',
            message: '请选择服务'
          })
          return
        }
        let params = {}
        params['servicesStr'] = servicesStr
        params['specType'] = this.goods.specType
        this.goodsSku = []
        this.goodsSpuSpec = []
        this.isSelectedCurrencySpuSpec = false
        getSpecByServiceCodes(params).then(response => {
          console.log(response)
          if (response.code === 200) {
            // this.goodsSku = [];
            // this.goodsSpuSpec = [];
            if (params['specType'] === '1') {
              //通用规格
              this.isSelectedCurrencySpuSpec = true
              let skuItemDict = {}
              this.goods.skus.forEach((item) => {
                let key = item.name + '-' + item.serviceName + '-' + item.serviceCode
                if (!skuItemDict[key]) {
                  skuItemDict[key] = true
                }
              })
              for (let key in skuItemDict) {
                let specName = key.split('-')[0]
                let serviceName = key.split('-')[1]
                let serviceCode = key.split('-')[2]

                for (let i = 0; i < response.data.length; i++) {
                  let itemInfo = response.data[i]
                  if (specName != itemInfo.name) {
                    continue
                  }
                  let itemObj = {}
                  itemObj['serviceName'] = serviceName
                  itemObj['serviceCode'] = serviceCode
                  itemObj['name'] = specName
                  itemObj['id'] = itemInfo.id
                  itemObj['skus'] = []
                  itemObj['specClassList'] = itemInfo.specClassList.concat()
                  itemObj['isNeedSupplier'] = itemInfo.isNeedSupplier

                  for (let j = 0; j < itemInfo.specClassList.length; j++) {
                    let specClassItem = itemInfo.specClassList[j]
                    itemObj['name' + (j + 1)] = specClassItem.name
                  }

                  let _key = specName + '-' + serviceName + '-' + serviceCode
                  if (skuItemDict[_key]) {
                    if (!arrayIsInByParamVal(this.goodsSpuSpec, 'id', itemInfo.id)) {
                      this.goodsSpuSpec.push(itemInfo)
                    }
                    this.goodsSku.push(itemObj)
                  }
                }
              }
            } else {
              //非通用
              console.log('----------->非通用')
              for (let i = 0; i < response.data.length; i++) {
                let itemInfo = response.data[i]
                let itemObj = {}
                itemObj['serviceName'] = itemInfo.serviceName
                itemObj['serviceCode'] = itemInfo.serviceCode
                itemObj['name'] = itemInfo.name
                itemObj['id'] = itemInfo.id
                itemObj['skus'] = []
                itemObj['specClassList'] = itemInfo.specClassList.concat()
                itemObj['isNeedSupplier'] = itemInfo.isNeedSupplier

                for (let j = 0; j < itemInfo.specClassList.length; j++) {
                  let specClassItem = itemInfo.specClassList[j]
                  itemObj['name' + (j + 1)] = specClassItem.name
                }
                this.goodsSpuSpec.push(itemInfo)
                this.goodsSku.push(itemObj)
              }
            }
            if (this.editType === 'edit' || this.editType === 'detail') {
              this.setGoodsSkuData(this.goodsSku, this.goods.skus)
            }
          } else {
            this.$modal.msgError(response.message)
          }
        }).catch((response) => {
          if (response.code === 100109) {
            let idx = response.message.indexOf('服务没有绑定规格')
            if (idx > -1) {
              let serviceCode = response.message.substring(0, idx)
              let serviceName = this.servicesInfoDict[serviceCode] || serviceCode
              let txt = serviceName + response.message.substring(idx)
              this.$modal.msgError(txt)
            }
          }
        })
      },
      setGoodsSkuData(oldGoodsSku, newGoodsSkus) {
        console.log('-------------->setGoodsSkuData')
        console.log(oldGoodsSku)
        console.log(newGoodsSkus)
        for (let i = 0; i < oldGoodsSku.length; i++) {
          let oldInfo = oldGoodsSku[i]
          for (let j = 0; j < newGoodsSkus.length; j++) {
            let newInfo = newGoodsSkus[j]
            if (oldInfo.name === newInfo.name && oldInfo.serviceName === newInfo.serviceName) {
              newInfo['uuid'] = newInfo.id
              newInfo['serviceCode'] = oldInfo.serviceCode
              oldInfo.skus.push(newInfo)
            }
          }
        }
      },
      setGoodsSku(val, val2) {
        console.log(
          '🚀 ~ file: create.vue ~ line 919 ~ setGoodsSku ~ setGoodsSku(val, val2)',
          val,
          val2
        )
        this.goodsSkuData = val
        this.goodsSpuSpecData = val2
      },
      /**
       * 选中商品类目树状选项
       */
      handleChange(value) {
        console.log(value)
        if (!value) {
          return
        }
        if (value.length) {
          let _categoryIds = value.concat()
          this.categoryIdJson = {}
          this.getSelectedTreeData(this.categoryIdJson, _categoryIds, this.treeData)
        }
        this.goods.categoryId = JSON.stringify(this.categoryIdJson)
      },
      getSelectedTreeData(jsonData, ids, treeData) {
        let _id = ids.shift()
        for (let node of treeData) {
          if (node['id'] === _id) {
            jsonData['id'] = node.id
            jsonData['name'] = node.name
            if (ids.length) {
              jsonData['children'] = {}
              this.getSelectedTreeData(jsonData['children'], ids, node.children)
            }
          }
        }
      },
      getSelectedIdsByJson(selectedIds, jsonData) {
        if (jsonData['id']) {
          selectedIds.push(jsonData['id'])

          if (jsonData['children']) {
            this.getSelectedIdsByJson(selectedIds, jsonData['children'])
          }
        }
      },
      restructureTableData(data) {
        let newList = []
        for (let i = 0; i < data.length; i++) {
          let item = data[i]
          // console.log(item);
          let newItem = {}
          // console.log(item.children)
          newItem['id'] = item.id
          newItem['name'] = item.name
          newItem['value'] = item.id
          newItem['label'] = item.name
          newItem['parentId'] = item.parentId
          newItem['level'] = item.level
          newList.push(newItem)
        }
        return newList
      },
      // changeProtocolUrl(vals){
      //   this.protocolUrlList = vals;
      // },
      /**
       * 展示可选Sku 列表
       */
      showSelectSkuItem(serviceName, spuSpecName, skuStr) {
        console.log('----------->showSelectSkuItem')

        let servicesStr = ''
        this.goods.services.forEach((item, index) => {
          console.log('item:' + item.serviceCode + '  index:' + index)
          if (index > 0) {
            servicesStr += ','
          }
          servicesStr += item.serviceCode
        })

        if (!servicesStr) {
          this.$message({
            type: 'error',
            message: '请选择服务'
          })
          return
        }
        this.$refs.skuItemSelector.servicesStr = servicesStr
        this.$refs.skuItemSelector.specType = this.goods.specType
        this.$refs.skuItemSelector.serviceName = serviceName
        this.$refs.skuItemSelector.spuSpecName = spuSpecName
        this.$refs.skuItemSelector.skuStr = skuStr

        this.showSkuItemSelector = true
      },
      /**
       * 选中服务确认
       */
      onSkuItemSelectorConfirm(params) {
        console.log(params)
        //选中sku items
        if (this.goods.specType === '1') {
          for (let idx = 0; idx < this.goods.services.length; idx++) {
            let serviceInfo = this.goods.services[idx]
            let _multipleSelection = params.multipleSelection

            this.initSkuItemSelectorConfirm({
              multipleSelection: _multipleSelection,
              spuSpecName: params.spuSpecName,
              serviceName: serviceInfo.serviceName
            })
          }
        } else {
          this.initSkuItemSelectorConfirm(params)
        }
      },
      initSkuItemSelectorConfirm(params) {
        console.log('---->initSkuItemSelectorConfirm')
        for (let i = 0; i < this.goodsSku.length; i++) {
          let itemInfo = this.goodsSku[i]
          console.log(itemInfo)
          console.log('---------------->111')
          if ((itemInfo.name === params.spuSpecName && itemInfo.serviceName === params.serviceName)) {
            console.log('---------------->333')
            let itemNewSkus = []
            let itemNewSkusUid = []
            // itemInfo.skus = params.multipleSelection.concat();
            // 已有数据覆盖
            itemInfo.skus.forEach((item) => {
              for (let j = 0; j < params.multipleSelection.length; j++) {
                let selectedItem = params.multipleSelection[j]
                if (itemInfo.specClassList.length === 3) {
                  if (item.name1 === selectedItem.name1 && item.name2 === selectedItem.name2 && item.name3 === selectedItem.name3) {
                    itemNewSkus.push(item)
                    itemNewSkusUid.push(item.uuid)
                    selectedItem.uuid = item.uuid
                    continue
                  }
                }
                if (itemInfo.specClassList.length === 2) {
                  if (item.name1 === selectedItem.name1 && item.name2 === selectedItem.name2) {
                    itemNewSkus.push(item)
                    itemNewSkusUid.push(item.uuid)
                    selectedItem.uuid = item.uuid
                    continue
                  }
                }
                if (itemInfo.specClassList.length === 1) {
                  if (item.name1 === selectedItem.name1) {
                    itemNewSkus.push(item)
                    itemNewSkusUid.push(item.uuid)
                    selectedItem.uuid = item.uuid
                    continue
                  }
                }
              }
            })

            params.multipleSelection.forEach((item) => {
              if (!itemNewSkusUid.includes(item.uuid)) {
                console.log('---------------->555')
                item.serviceCode = itemInfo.serviceCode
                item.serviceName = itemInfo.serviceName
                itemNewSkus.push(item)
                itemNewSkusUid.push(item.uuid)
              }
            })
            console.log('---------------->666')
            console.log(JSON.stringify(itemNewSkus))
            itemInfo.skus = JSON.parse(JSON.stringify(itemNewSkus))
          }
        }
      },
      parseSevices(sevis) {
        let services = []
        let serviceCodes = new Set()
        if (sevis && sevis.length) {
          sevis.forEach(element => {
            if (serviceCodes.has(element.serviceCode) == false) {
              services.push(element)
              serviceCodes.add(element.serviceCode)
            }
          })
        }
        return services
      },
      /**
       * 添加协议地址
       */
      addProtocol(key) {
        if (!this.goods.deviceType) {
          return
        }
        if (this.editType === 'detail') {
          return
        }
        this.addProtocolIndex = Number(key)
        this.$refs.protocolItemSelector.defaultelection = this.goods.protocolUrlOfDeviceType[key]
        this.showProtocolItemSelector = true
      },
      /**
       * 选中协议地址确认
       */
      onProtocolItemSelectorConfirm(params) {
        this.goods.protocolUrlOfDeviceType[this.addProtocolIndex] = params.multipleSelection.concat()
        this.addProtocolIndex = -1
      },
      //从列表选中规格选项后，更新展示规格商品内容
      showSpecItem() {
        if (this.editType === 'detail') {
          return
        }

        let servicesStr = ''
        this.goods.services.forEach((item, index) => {
          console.log('item:' + item.serviceCode + '  index:' + index)
          if (index > 0) {
            servicesStr += ','
          }
          servicesStr += item.serviceCode
        })

        if (!servicesStr) {
          this.$message({
            type: 'error',
            message: '请选择服务'
          })
          return
        }
        this.$refs.specItemSelector.servicesStr = servicesStr
        this.$refs.specItemSelector.specType = this.goods.specType
        this.$refs.specItemSelector.defaultelection = this.goodsSpuSpec.concat()
        this.showSpecItemSelector = true
      },
      onSpecItemMultipleSelectorConfirm(params) {
        this.goodsSpuSpec = params.multipleSelection
        this.goodsSku = []

        for (let j = 0; j < this.goods.services.length; j++) {
          let serviceItem = this.goods.services[j]

          for (let i = 0; i < params.multipleSelection.length; i++) {
            let itemInfo = params.multipleSelection[i]
            let itemObj = {}
            itemObj['serviceName'] = serviceItem.serviceName
            itemObj['serviceCode'] = serviceItem.serviceCode
            itemObj['name'] = itemInfo.name
            itemObj['id'] = itemInfo.id
            itemObj['skus'] = []
            itemObj['specClassList'] = itemInfo.specClassList.concat()
            itemObj['isNeedSupplier'] = itemInfo.isNeedSupplier

            for (let j = 0; j < itemInfo.specClassList.length; j++) {
              let specClassItem = itemInfo.specClassList[j]
              itemObj['name' + (j + 1)] = specClassItem.name
            }
            this.goodsSku.push(itemObj)
          }
        }
        if (this.editType === 'edit' || this.editType === 'detail') {
          this.setGoodsSkuData(this.goodsSku, this.goods.skus)
        }
      }
    },
    watch: {
      'goods.deviceType'(newV, oldV) {
        if (typeof this.goods.protocolUrlOfDeviceType !== 'object'){
          this.goods.protocolUrlOfDeviceType = {}
        }
        //新数组少于旧数组表示当前操作是删除某一节点
        if (newV.length < oldV.length) {
          let differentArr = oldV.filter(e => !newV.includes(e))
          differentArr.forEach(e => {
            delete this.goods.protocolUrlOfDeviceType[e]
          })
        } else {
          if (this.goods.deviceType.length > 0) {
            this.goods.deviceType.forEach(e => {
              this.goods.protocolUrlOfDeviceType[e] = []
            })
          }
        }
      }
    }
  }
</script>

<style>
  .el-card {
    margin-bottom: 10px;
  }

  .el-tag {
    margin-right: 10px;
  }

  .input-new-keyword {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .avatar-uploader .el-upload {
    width: 145px;
    height: 145px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }

  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }

  .imgClass {
    margin-right: 10px;
  }

  .from-item {
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    padding: 0 10px;
  }

  .btn-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
</style>
